<template>
	<div>
		<el-tag
			:key="tag.paramsNatureName"
			v-for="tag in NatureList"
			closable
			:disable-transitions="false"
			@close="handleTagClose(tag)"
		>{{tag.paramsNatureName}}</el-tag>
		<el-input
			class="input-new-tag"
			v-if="inputVisible"
			v-model="inputValue"
			ref="saveTagInput"
			size="small"
			@keyup.enter.native="handleInputConfirm"
			@blur="handleInputConfirm"
		></el-input>
		<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
	</div>
</template>

<script>
export default {
	props: {
		NatureList: {
			type: Array,
			default: []
        },
        ParamID:{
            type:parseInt,
            default:0
        }
	},
	data() {
		return {
			inputVisible: false,
			inputValue: ''
		}
	},
	methods: {
		//点击删除标签时的方法
		handleTagClose(tag) {   
            //删除
            this.$get('/api/Params/DelParamsNature',{
                ID:tag.id
            }).then(res=>{
                if(res.code==0){
                    this.$message({
                        message:res.msg,
                        type:'success'
                    })
                    this.NatureList.splice(this.NatureList.indexOf(tag), 1)
                }else{
                    this.$message.error(res.msg)
                }
            })

		},
		// 显示文本输入框
		showInput() {
			this.inputVisible = true
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus()
			})
		},

		handleInputConfirm() {
			// let inputValue = this.inputValue
			// if (inputValue) {
			// 	this.dynamicTags.push(inputValue)
			// }
			if (this.inputValue.trim().length == 0) {
				this.inputValue = ''
                this.inputVisible = false
                return
            }
            this.$get('/api/Params/AddParamsNature',{
                ParamsId:this.ParamID,
                ParamsNatureName:this.inputValue
            }).then(res=>{
                if(res.code==0){
                    this.$message({
                        message:res.msg,
                        type:'success'
                    })
                    this.NatureList.push(res.data)
                }else{
                    this.$message.error(res.msg)
                }
            }).catch(err=>{
                console.log(err)
            })
			this.inputVisible = false
			this.inputValue = ''
		}
	}
}
</script>

<style lang="stylus" scoped>
.el-tag + .el-tag {
	margin-left: 10px;
}

.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}

.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}
</style>